<template>
    <div class="">
        <div v-if="showHeader" class="text-base component-title"><img class="w-[24px] h-[24px]" :src="Icon" /><div>{{title}}</div></div>
        <el-select v-model="value" :placeholder="placeholder" class="w-full mt-[10px]">
            <el-option v-for="(item) in modelList" :key="item.model_name" :label="item.model_name"
                :value="item.model_name" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import Icon from '@/assets/images/drawing/icon_prompt.png'
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelList?: any,
        modelValue?: any,
        title?:string,
        showHeader?:boolean,
        placeholder?:string,
    }>(),
    {
        modelList: [],
        modelValue: '',
        title: '',
        showHeader: true,
        placeholder:'',
    }
)
const { modelValue: value } = useVModels(props, emit)

// watchEffect(() => {
//     const modelList = props.modelList
//     if (modelList.length !== 0) {
//         value.value = modelList[0].model_name
//     }
// })
</script>

<style scoped>
.style-container>div {
    cursor: pointer;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 4px;
    padding: 8px;
    border: 2px solid #e5e5e5;
}

.style-container>div:nth-child(3n) {
    margin-right: 0px;
}

.style-container .style-active {
    border: 2px solid var(--el-color-primary);
}

.component-title {
    display: flex;
    align-items: center;
    height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
</style>
